<form nz-form [formGroup]="addForm" class="modal-add-form" (ngSubmit)="submitAddForm()">
    <nz-form-item>
        @if (editMode == modeEnum.ADD) {
            <nz-form-label [nzSm]="6" [nzXs]="24" nzFor="clientId" nzRequired="">客户端ID</nz-form-label>
        } @else {
            <nz-form-label [nzSm]="6" [nzXs]="24" nzFor="clientId">客户端ID</nz-form-label>
        }
        <nz-form-control [nzSm]="14" [nzXs]="24">
            <input class="default-input" nz-input formControlName="clientId" id="clientId" />
            @if (editMode == modeEnum.ADD) {
            <div *ngIf="submitted && fm['clientId'].invalid" class="alert">
                <div *ngIf="fm['clientId'].errors?.['rquired']">客户端Id不能为空</div>
                <div *ngIf="fm['clientId'].errors?.['minlength']">长度不小于2</div>
                <div *ngIf="fm['clientId'].errors?.['maxlength']">长度不超过20</div>
            </div>
            }
        </nz-form-control>
    </nz-form-item>

    @if (editMode == modeEnum.ADD) {
    <nz-form-item>
        <nz-form-label [nzSm]="6" [nzXs]="24" nzFor="clientSecret" nzRequired>客户端密码</nz-form-label>
        <nz-form-control [nzSm]="14" [nzXs]="24">
            <input class="default-input" nz-input formControlName="clientSecret" id="clientSecret" />
            <div *ngIf="submitted && fm['clientSecret'].invalid" class="alert">
                <div *ngIf="fm['clientSecret'].errors?.['rquired']">客户端Id不能为空</div>
                <div *ngIf="fm['clientSecret'].errors?.['minlength']">长度不小于6</div>
                <div *ngIf="fm['clientSecret'].errors?.['maxlength']">长度不超过20</div>
            </div>
        </nz-form-control>
    </nz-form-item>
    }

    <nz-form-item>
        @if (editMode == modeEnum.ADD) {
            <nz-form-label [nzSm]="6" [nzXs]="24" nzFor="clientName" nzRequired="">客户端名称</nz-form-label>
        } @else {
            <nz-form-label [nzSm]="6" [nzXs]="24" nzFor="clientName">客户端名称</nz-form-label>
        }
        <nz-form-control [nzSm]="14" [nzXs]="24">
            <input class="default-input" #clientName nz-input formControlName="clientName" id="clientName" />
            @if (editMode == modeEnum.ADD) {
            <div *ngIf="submitted && fm['clientName'].invalid" class="alert">
                <div *ngIf="fm['clientName'].errors?.['rquired']">客户端名称不能为空</div>
                <div *ngIf="fm['clientName'].errors?.['minlength']">长度不小于2</div>
                <div *ngIf="fm['clientName'].errors?.['maxlength']">长度不超过20</div>
            </div>
            } @else {
            <div *ngIf="submitted && fm['clientName'].invalid && fm['clientName'].dirty" class="alert">
                <div *ngIf="fm['clientName'].errors?.['rquired']">客户端名称不能为空</div>
                <div *ngIf="fm['clientName'].errors?.['minlength']">长度不小于2</div>
                <div *ngIf="fm['clientName'].errors?.['maxlength']">长度不超过20</div>
            </div>
            }
        </nz-form-control>
    </nz-form-item>

    <nz-form-item *ngFor="let uriControl of listOfUris; let i = index">
        @if (i === 0) {
        <nz-form-label [nzSm]="6" [nzXs]="24" [nzFor]="uriControl.controlInstance">
            重定向Uri
        </nz-form-label>
        } @else {
        <nz-form-label [nzSm]="6" [nzXs]="24" [nzFor]="uriControl.controlInstance" [nzNoColon]="true">
        </nz-form-label>
        }
    
        <nz-form-control [nzSm]="12" [nzXs]="24" nzErrorTip="请输入重定向Uri">
            <div nz-row [nzGutter]="24">
                <div nz-col [nzSpan]="22">
                    <input class="default-input uri-input" nz-input placeholder="http://" [attr.id]="uriControl.id"
                        [formControlName]="uriControl.controlInstance" />
                </div>
                <div nz-col [nzSpan]="2">
                    <span nz-icon nzType="minus-circle-o" class="dynamic-delete-button"
                        (keydown)="removeUriField(uriControl, $event)" (click)="removeUriField(uriControl, $event)"
                        tabindex="{{i}}"></span>
                </div>
            </div>
        </nz-form-control>
    </nz-form-item>

    <nz-form-item>
        <nz-form-control [nzXs]="{ span: 24, offset: 0 }" [nzSm]="{ span: 14, offset: 6}">
            <button nz-button nzType="dashed" class="add-button" (click)="addUriField($event)">Add
                Uri</button>
        </nz-form-control>
    </nz-form-item>

    <nz-form-item *ngFor="let scopeControl of listOfScopes; let i = index">
        @if (i === 0) {
        <nz-form-label [nzSm]="6" [nzXs]="24" [nzFor]="scopeControl.controlInstance">
            授权范围
        </nz-form-label>
        } @else {
        <nz-form-label [nzSm]="6" [nzXs]="24" [nzFor]="scopeControl.controlInstance" [nzNoColon]="true">
        </nz-form-label>
        }
    
        <nz-form-control [nzSm]="12" [nzXs]="24" nzErrorTip="请输入授权字符串">
            <div nz-row [nzGutter]="24">
                <div nz-col [nzSpan]="22">
                    <input class="default-input uri-input" nz-input placeholder="http://" [attr.id]="scopeControl.id"
                        [formControlName]="scopeControl.controlInstance" />
                </div>
                <div nz-col [nzSpan]="2">
                    <span nz-icon nzType="minus-circle-o" class="dynamic-delete-button"
                        (keydown)="removeScopeField(scopeControl, $event)" (click)="removeScopeField(scopeControl, $event)"
                        tabindex="{{i}}"></span>
                </div>
            </div>
        </nz-form-control>
    </nz-form-item>

    <nz-form-item>
        <nz-form-control [nzXs]="{ span: 24, offset: 0 }" [nzSm]="{ span: 14, offset: 6}">
            <button nz-button nzType="dashed" class="add-button" (click)="addScopeField($event)">Add
                Scope</button>
        </nz-form-control>
    </nz-form-item>

    <div nz-row nzJustify="end">
        <div nz-col>
            @if (editMode == modeEnum.ADD) {
            <button nz-button class="dialog-button" nzType="primary">添加</button>
            } @else {
            <button nz-button class="dialog-button" nzType="primary">修改</button>
            }
            <button nz-button class="dialog-button" (click)="handleCancel($event)">取消</button>
        </div>
    </div>
</form>